<template>
  <Dropdown @on-click="handleOnclick" placement="right-start">
    <span v-if="!showTitle" class="drop-menu-tip" :style="titleStyle">
      <Icon :type="parent.icon" :color="iconColor" :size="30"/>
    </span>
    <DropdownItem v-else :name="parent.name">
      <Icon :type="parent.icon" :color="iconColor" :size="23"/>
      <span> {{parent.title}}</span>
      <Icon type="ios-arrow-forward"></Icon>
    </DropdownItem>
    <DropdownMenu slot="list">
      <template v-for="item in parent.children">
        <SiderDropdown
          v-if="item.children"
          :parent="item"
          :key="`drop_${item.name}`"
        >
        </SiderDropdown>
        <DropdownItem
          v-else
          :key="`drop_${item.name}`"
          :name="item.name"
        >
          <Icon :type="item.icon" :size="23"/>
          {{item.title}}
        </DropdownItem>
      </template>
    </DropdownMenu>
  </Dropdown>
</template>

<script>
export default {
  name: 'SiderDropdown',
  props:{
    parent:{
      type: Object,
      default: () => ({})
    },
    iconColor:{
      type: String,
      default: '#515a6e'
    },
    showTitle:{
      type: Boolean,
      default: true
    }
  },
  computed:{
    titleStyle(){
      return {
        textAlign: this.showTitle ? 'left' : 'center',
        paddingLeft: this.showTitle ? '16px' : ''
      }
    }
  },
  methods:{
    /**
     * 收缩状态下获取多级菜单name
     */
    handleOnclick(name){
      if(!this.showTitle) this.$emit('on-select',name)
    }
  }
}
</script>

<style lang="less">

</style>
